<Infrastructure:VisualStateAwarePage
                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                     xmlns:behaviors="using:AdventureWorks.Shopper.Behaviors"
                                     xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:core="using:Microsoft.Xaml.Interactions.Core" 
                                     xmlns:views="using:AdventureWorks.Shopper.Views"
                                     xmlns:controls="using:AdventureWorks.Shopper.Controls"
                                     xmlns:designViewModels="using:AdventureWorks.Shopper.DesignViewModels"
                                     xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
                                     x:Name="pageRoot"
                                     x:Class="AdventureWorks.Shopper.Views.HubPage"
                                     IsTabStop="false"
                                     x:Uid="Page"
                                     mc:Ignorable="d"
                                     Infrastructure:ViewModelLocator.AutoWireViewModel="true"
                                     d:DataContext="{d:DesignInstance designViewModels:HubPageDesignViewModel, IsDesignTimeCreatable=True}">

    <Infrastructure:VisualStateAwarePage.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource x:Name="groupedItemsViewSource"
                              Source="{Binding RootCategories}"
                              d:DesignSource="{Binding RootCategories, Source={d:DesignInstance designViewModels:HubPageDesignViewModel, IsDesignTimeCreatable=True}}"
                              IsSourceGrouped="true"
                              ItemsPath="Products" />
     </Infrastructure:VisualStateAwarePage.Resources>

    <Infrastructure:VisualStateAwarePage.TopAppBar>
        <AppBar Style="{StaticResource AppBarStyle}"
                x:Uid="TopAppBar">
        	<views:TopAppBarUserControl />
        </AppBar>
    </Infrastructure:VisualStateAwarePage.TopAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
	<Grid Style="{StaticResource LayoutRootStyle}">
		<Grid.RowDefinitions>
			<RowDefinition Height="140" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>

		<VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
			<VisualStateGroup x:Name="ApplicationViewStates">
				<VisualState x:Name="DefaultLayout">
					<!-- The default Visibility properties are set in the XAML that defines the objects. -->
				</VisualState>
				<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->

				<VisualState x:Name="PortraitLayout">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
							Storyboard.TargetProperty="Padding">
							<DiscreteObjectKeyFrame KeyTime="0"
								Value="40,0,10,30" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="CanChangeViews">
							<DiscreteObjectKeyFrame KeyTime="0" Value="false" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="IsZoomOutButtonEnabled">
							<DiscreteObjectKeyFrame KeyTime="0" Value="false" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="AppLogo">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Thickness>-90,0,0,0</Thickness>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
                <!--
                    The back button and title have different styles when in minimal layout, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
				<VisualState x:Name="MinimalLayout">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView" Storyboard.TargetProperty="Padding">
							<DiscreteObjectKeyFrame KeyTime="0" Value="20,0,10,0" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
							Storyboard.TargetProperty="Style">
							<DiscreteObjectKeyFrame KeyTime="0"
								Value="{StaticResource MinimalBackButtonStyle}" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="CanChangeViews">
							<DiscreteObjectKeyFrame KeyTime="0" Value="false" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="IsZoomOutButtonEnabled">
							<DiscreteObjectKeyFrame KeyTime="0" Value="false" />
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
							Storyboard.TargetName="AppLogo">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<x:Double>150</x:Double>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
							Storyboard.TargetName="AppLogo">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Thickness>10,30,0,0</Thickness>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
							Storyboard.TargetName="shoppingCartTabUserControl">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Thickness>0,37,-20,0</Thickness>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
							Storyboard.TargetName="searchUserControl">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="*" />
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>
			<Button x:Name="backButton"
				AutomationProperties.AutomationId="HubPageGoBackButton"
				Command="{Binding GoBackCommand, ElementName=pageRoot}"
				Style="{StaticResource BackButtonStyle}" />
			<Image x:Name="AppLogo"
				AutomationProperties.Name="AppLogo"
				Source="../Assets/BannerLogo.png"
				Height="60"
				Margin="0,0,0,0"
				Grid.Column="1"
				HorizontalAlignment="Left" />
			<views:SearchUserControl x:Name="searchUserControl"
				Grid.Column="2"
				Margin="15,15,0,15" />
			<views:ShoppingCartTabUserControl x:Name="shoppingCartTabUserControl"
				Grid.Column="3"
				RenderTransformOrigin="0.5,0.5"
				Margin="15"
				Loaded="StartLayoutUpdates"
				Unloaded="StopLayoutUpdates">
				<views:ShoppingCartTabUserControl.RenderTransform>
					<CompositeTransform />
				</views:ShoppingCartTabUserControl.RenderTransform>
			</views:ShoppingCartTabUserControl>
		</Grid>
		<ProgressRing Grid.Row="1" IsActive="{Binding LoadingData}" Height="100" Width="100"/>
		<SemanticZoom Grid.Row="1" x:Name="semanticZoom">
			<SemanticZoom.ZoomedOutView>
				<GridView x:Name="zoomedOutGrid"
					Padding="120,0,0,0"
					Foreground="White"
					AutomationProperties.AutomationId="HubPageGridView"
					ScrollViewer.IsHorizontalScrollChainingEnabled="False"
					ItemTemplate="{StaticResource AWShopperItemTemplateSemanticZoom}">
					<GridView.ItemsPanel>
						<ItemsPanelTemplate>
							<WrapGrid ItemWidth="250"
								ItemHeight="250"
								MaximumRowsOrColumns="2"
								VerticalChildrenAlignment="Center" />
						</ItemsPanelTemplate>
					</GridView.ItemsPanel>
				</GridView>

			</SemanticZoom.ZoomedOutView>

			<SemanticZoom.ZoomedInView>
				<!-- Horizontal scrolling grid used in most view states -->
                <controls:MultipleSizedGridView x:Name="itemsGridView"
					AutomationProperties.AutomationId="HubPageItemGridView"
					AutomationProperties.Name="Grouped Items"
					Margin="0,0,0,0"
					Padding="120,0,40,50"
					ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
					ItemTemplate="{StaticResource AWShopperItemTemplate}"
					MinimalItemTemplate="{StaticResource ProductTemplateMinimal}"
					SelectionMode="None"
					ScrollViewer.IsHorizontalScrollChainingEnabled="False"
					IsItemClickEnabled="True">
                    <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="ItemClick">
                            <behaviors:NavigateWithEventArgsToPageAction TargetPage="AdventureWorks.Shopper.Views.ItemDetailPage" EventArgsParameterPath="ClickedItem.ProductNumber"/>
                        </core:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
					<controls:MultipleSizedGridView.ItemsPanel>
						<ItemsPanelTemplate>
							<VariableSizedWrapGrid Orientation="Horizontal" />
						</ItemsPanelTemplate>
					</controls:MultipleSizedGridView.ItemsPanel>
					<controls:MultipleSizedGridView.PortraitItemsPanel>
						<ItemsPanelTemplate>
							<VariableSizedWrapGrid Orientation="Vertical" />
						</ItemsPanelTemplate>
					</controls:MultipleSizedGridView.PortraitItemsPanel>
					<controls:MultipleSizedGridView.GroupStyle>
						<GroupStyle>
							<GroupStyle.HeaderTemplate>
								<DataTemplate>
									<Button AutomationProperties.Name="{Binding Title}"
										Foreground="{StaticResource AWShopperAccentTextBrush}"
										Style="{StaticResource TextPrimaryButtonStyle}"
										Command="{Binding CategoryNavigationCommand}"
										Margin="5,0,0,10">
										<StackPanel Orientation="Horizontal">
											<TextBlock Text="{Binding Title}"
												Style="{StaticResource GroupHeaderTextStyle}" />
											<TextBlock Text="{StaticResource ChevronGlyph}"
												Style="{StaticResource GroupHeaderTextStyle}"
												FontFamily="{StaticResource SymbolThemeFontFamily}"
												Margin="10,0" />
										</StackPanel>
									</Button>
								</DataTemplate>
							</GroupStyle.HeaderTemplate>
							<GroupStyle.Panel>
								<ItemsPanelTemplate>
									<VariableSizedWrapGrid ItemWidth="250"
										ItemHeight="250"
										Orientation="Vertical"
										Margin="0,0,80,0" />
								</ItemsPanelTemplate>
							</GroupStyle.Panel>
						</GroupStyle>
					</controls:MultipleSizedGridView.GroupStyle>
					<controls:MultipleSizedGridView.PortraitGroupStyle>
						<GroupStyle>
							<GroupStyle.HeaderTemplate>
								<DataTemplate>
									<Button AutomationProperties.Name="{Binding Title}"
										Foreground="{StaticResource AWShopperAccentTextBrush}"
										Style="{StaticResource TextPrimaryButtonStyle}"
										Command="{Binding CategoryNavigationCommand}"
										Margin="5,0,0,10">
										<StackPanel Orientation="Horizontal">
											<TextBlock Text="{Binding Title}"
												Style="{StaticResource GroupHeaderTextStyle}" />
											<TextBlock Text="{StaticResource ChevronGlyph}"
												Style="{StaticResource GroupHeaderTextStyle}"
												FontFamily="{StaticResource SymbolThemeFontFamily}"
												Margin="10,0" />
										</StackPanel>
									</Button>
								</DataTemplate>
							</GroupStyle.HeaderTemplate>
							<GroupStyle.Panel>
								<ItemsPanelTemplate>
									<VariableSizedWrapGrid ItemWidth="250"
										ItemHeight="250"
										Orientation="Horizontal"
										Margin="0,0,0,20" />
								</ItemsPanelTemplate>
							</GroupStyle.Panel>
						</GroupStyle>
					</controls:MultipleSizedGridView.PortraitGroupStyle>
                    <controls:MultipleSizedGridView.MinimalGroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Button AutomationProperties.Name="Group Title"
										Foreground="{StaticResource AWShopperAccentTextBrush}"
										Style="{StaticResource TextPrimaryButtonStyle}"
										Command="{Binding CategoryNavigationCommand}"
										Margin="10,10,0,10">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Title}"
												Style="{StaticResource GroupHeaderTextStyle}" />
                                            <TextBlock Text="{StaticResource ChevronGlyph}"
												Style="{StaticResource GroupHeaderTextStyle}"
												FontFamily="{StaticResource SymbolThemeFontFamily}"
												Margin="10,0" />
                                        </StackPanel>
                                    </Button>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical" Margin="0" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </controls:MultipleSizedGridView.MinimalGroupStyle>
                </controls:MultipleSizedGridView>
			</SemanticZoom.ZoomedInView>
		</SemanticZoom>

	</Grid>
</Infrastructure:VisualStateAwarePage>
